<template>
    <label :class="classObject">
        <span class="vue-switcher__label" v-if="shouldShowLabel">
            <span v-if="label" v-text="label"></span>
            <span v-if="!label && value" v-text="textEnabled"></span>
            <span v-if="!label && !value" v-text="textDisabled"></span>
        </span>

        <input type="checkbox" :disabled="disabled" @change="trigger" :checked="value">

        <div></div>
    </label>
</template>

<script>
export default {
  name: 'zz-switch',
  props: {
    typeBold: {
      default: true
    },

    value: {
      default: false
    },

    disabled: {
      default: false
    },

    label: {
      default: ''
    },

    textEnabled: {
      default: ''
    },

    textDisabled: {
      default: ''
    },

    color: {
      default: 'green'
    },

    theme: {
      default: 'bulma'
    },

    emitOnMount: {
      default: true
    }
  },

  methods: {
    trigger (e) {
      this.$emit('input', e.target.checked)
    }
  },

  computed: {
    classObject () {
      const { color, value, theme, typeBold, disabled } = this
      return {
        'vue-switcher': true,
        'vue-switcher--unchecked': !value,
        'vue-switcher--disabled': disabled,
        'vue-switcher--bold': typeBold,
        'vue-switcher--bold--unchecked': typeBold && !value,
        [`vue-switcher-theme--${theme}`]: color,
        [`vue-switcher-color--${color}`]: color
      }
    },
    shouldShowLabel () {
      return this.label !== '' || this.textEnabled !== '' || this.textDisabled !== ''
    }
  }
}

</script>

<style lang="scss" scoped>
    .vue-switcher {
        position: relative;
        display: inline-block;
        vertical-align: top;

        &__label {
            display: block;
            font-size: 10px;
            margin-bottom: 5px;
        }

        input {
            opacity: 0;
            width: 100%;
            height: 100%;
            position: absolute;
            z-index: 1;
            cursor: pointer;
        }

        div {
            height: 15px;
            width: 36px;
            position: relative;
            border-radius: 30px;
            display: -webkit-flex;
            display: -ms-flex;
            display: flex;
            align-items: center;
            justify-content: flex-start;
            cursor: pointer;
            transition: linear .2s, background-color linear .2s;

            &:after {
                content: '';
                height: 10px;
                width: 10px;
                border-radius: 100%;
                display: block;
                transition: linear .15s, background-color linear .15s;
                position: absolute;
                left: 100%;
                margin-left: -10px;
                cursor: pointer;
                top: -3px;
                box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.1);
            }
        }

        &--unchecked {
            div {
                justify-content: flex-end;

                &:after {
                    left: 15px;
                }
            }
        }

        &--disabled {
            div {
                opacity: .3;
            }

            input {
                cursor: not-allowed;
            }
        }

        &--bold {
            div {
                top: 2px;
                height: 16px;
                width: 35px;

                &:after {
                    margin-left: -14px;
                    top: 3px;
                }
            }

            &--unchecked {
                div {
                    &:after {
                        left: 18px;
                    }
                }
            }

            .vue-switcher__label {
                span {
                    padding-bottom: 7px;
                    display: inline-block;
                }
            }
        }
    }
    .vue-switcher-theme--bulma.vue-switcher-color--green div {
        background-color: $color;
    }
    .vue-switcher-theme--bulma.vue-switcher-color--green.vue-switcher--unchecked div {
        background-color: #ccc;
    }
    .vue-switcher-theme--bulma.vue-switcher-color--green.vue-switcher--unchecked div:after {
        background-color: #fff;
    }
    .vue-switcher-theme--bulma.vue-switcher-color--green div:after {
        background-color: #fff;
    }

</style>
